<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Focus &mdash; 100% Free Fully Responsive HTML5 Template by FREEHTML5.co</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="Free HTML5 Template by FREEHTML5" />
	<meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive" />
	

  

  	<!-- Facebook and Twitter integration -->
	<meta property="og:title" content=""/>
	<meta property="og:image" content=""/>
	<meta property="og:url" content=""/>
	<meta property="og:site_name" content=""/>
	<meta property="og:description" content=""/>
	<meta name="twitter:title" content="" />
	<meta name="twitter:image" content="" />
	<meta name="twitter:url" content="" />
	<meta name="twitter:card" content="" />

	<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
	<link rel="shortcut icon" href="favicon.ico">

	<!-- <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700,900' rel='stylesheet' type='text/css'>
	<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700" rel="stylesheet"> -->
	
	<!-- Animate.css -->
	<link rel="stylesheet" href="css/animate.css">
	<!-- Icomoon Icon Fonts-->
	<link rel="stylesheet" href="css/icomoon.css">
	<!-- Bootstrap  -->
	<link rel="stylesheet" href="css/bootstrap.css">
	<!-- Magnifoc Popup  -->
	<link rel="stylesheet" href="css/magnific-popup.css">

	<link rel="stylesheet" href="css/style.css">


	<!-- Modernizr JS -->
	<script src="js/modernizr-2.6.2.min.js"></script>
	<!-- FOR IE9 below -->
	<!--[if lt IE 9]>
	<script src="js/respond.min.js"></script>
	<![endif]-->

	</head>
	<body>

	<nav id="fh5co-main-nav" role="navigation">
		<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle active"><i></i></a>
		<div class="js-fullheight fh5co-table">
			<div class="fh5co-table-cell js-fullheight">
				<ul>
					<li class="active"><a href="index.html">首页</a></li>
					<li><a href="gallery.html">作品</a></li>
					<li><a href="services.html">商城</a></li>
					<li><a href="about.html">论坛</a></li>
					<li><a href="contact.html">注册/登录</a></li>
				</ul>
			</div>
		</div>
	</nav>
	
	<div id="fh5co-page">
		<header>
			<div class="container">
				<div class="fh5co-navbar-brand">
					<h1 class="text-center"><a class="fh5co-logo" href="index.html">
					     <img style="margin-left: -960px;" src="images/logos.png" alt="">
					     <img src="images/logo-ms.png" alt="">
					</a>
					</h1>
					<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>
				</div>
			</div>
		</header>
		<div id="fh5co-intro-section">
		<div class="wenzi">
		    <img style="margin-top: -90px;margin-left: 260px;" src="images/zhanshi1_01.gif" alt="">
		</div>
                    <div style="margin-left: 260px; margin-top: " class="col-md-6 animate-box">
						<a href="images/pic6.jpg" class="grid-photo img-popup" style="background-image: url(images/pic6.jpg);">
							<div class="desc">
								<h3></h3>
								<span></span>
							</div>
						</a>
						<img style="margin-left: 850px;margin-top: -440px; width: 300px;" src="images/kuangkuang.png" alt="">
					</div>
		<div class="xiawenzi">
		    <img style="margin-left: 260px;" src="images/zhanshi1_03.gif" alt="">
		</div>
		</div>
		
		  	<div id="fh5co-photos-section">
			<div class="container">
				<div class="row text-center">
					<div class="col-md-4 animate-box">
						<a href="images/pic1.jpg" class="grid-photo img-popup" style="background-image: url(images/pic1.jpg);">
							<div class="desc">
								<h3>Camera</h3>
								<span>12 Photos</span>
							</div>
						</a>
					</div>
					<div class="col-md-4 animate-box">
						<a href="images/pic3.jpg" class="grid-photo img-popup" style="background-image: url(images/pic3.jpg);">
							<div class="desc">
								<h3>Wedding</h3>
								<span>100 Photos</span>
							</div>
						</a>
					</div>
					<div class="col-md-4 animate-box">
						<a href="images/pic4.jpg" class="grid-photo img-popup" style="background-image: url(images/pic4.jpg);">
							<div class="desc">
								<h3>Drinks</h3>
								<span>45 Photos</span>
							</div>
						</a>
					</div>
					<div class="col-md-6 animate-box">
						<a href="images/pic5.jpg" class="grid-photo img-popup" style="background-image: url(images/pic5.jpg);">
							<div class="desc">
								<h3>Model</h3>
								<span>12 Photos</span>
							</div>
						</a>
					</div>
					<div class="col-md-6 animate-box">
						<a href="images/pic6.jpg" class="grid-photo img-popup" style="background-image: url(images/pic6.jpg);">
							<div class="desc">
								<h3>Interior Design</h3>
								<span>87 Photos</span>
							</div>
						</a>
					</div>
					<div class="col-md-3 animate-box">
						<a href="images/pic7.jpg" class="grid-photo img-popup" style="background-image: url(images/pic7.jpg);">
							<div class="desc">
								<h3>Car</h3>
								<span>32 Photos</span>
							</div>
						</a>
					</div>
					<div class="col-md-6 animate-box">
						<a href="images/pic8.jpg" class="grid-photo img-popup" style="background-image: url(images/pic8.jpg);">
							<div class="desc">
								<h3>Hand</h3>
								<span>14 Photos</span>
							</div>
						</a>
					</div>
					<div class="col-md-3 animate-box">
						<a href="images/pic9.jpg" class="grid-photo img-popup" style="background-image: url(images/pic9.jpg);">
							<div class="desc">
								<h3>Girl</h3>
								<span>12 Photos</span>
							</div>
						</a>
					</div>
					<div class="col-md-6 animate-box">
						<a href="images/pic10.jpg" class="grid-photo img-popup" style="background-image: url(images/pic10.jpg);">
							<div class="desc">
								<h3>Animals</h3>
								<span>22 Photos</span>
							</div>
						</a>
					</div>
					<div class="col-md-6 animate-box">
						<a href="images/pic11.jpg" class="grid-photo img-popup" style="background-image: url(images/pic11.jpg);">
							<div class="desc">
								<h3>Duck</h3>
								<span>16 Photos</span>
							</div>
						</a>
					</div>
					<div class="col-md-4 animate-box">
						<a href="images/pic12.jpg" class="grid-photo img-popup" style="background-image: url(images/pic12.jpg);">
							<div class="desc">
								<h3>Food</h3>
								<span>98 Photos</span>
							</div>
						</a>
					</div>
					<div class="col-md-4 animate-box">
						<a href="images/pic13.jpg" class="grid-photo img-popup" style="background-image: url(images/pic13.jpg);">
							<div class="desc">
								<h3>Prenup</h3>
								<span>76 Photos</span>
							</div>
						</a>
					</div>
					<div class="col-md-4 animate-box">
						<a href="images/pic14.jpg" class="grid-photo img-popup" style="background-image: url(images/pic14.jpg);">
							<div class="desc">
								<h3>Flower</h3>
								<span>45 Photos</span>
							</div>
						</a>
					</div>
					<div class="col-md-3 animate-box">
						<a href="images/pic15.jpg" class="grid-photo img-popup" style="background-image: url(images/pic15.jpg);">
							<div class="desc">
								<h3>Fruits</h3>
								<span>55 Photos</span>
							</div>
						</a>
					</div>
					<div class="col-md-6 animate-box">
						<a href="images/pic16.jpg" class="grid-photo img-popup" style="background-image: url(images/pic16.jpg);">
							<div class="desc">
								<h3>Bike</h3>
								<span>21 Photos</span>
							</div>
						</a>
					</div>
					<div class="col-md-3 animate-box">
						<a href="images/pic17.jpg" class="grid-photo img-popup" style="background-image: url(images/pic17.jpg);">
							<div class="desc">
								<h3>Lovers</h3>
								<span>45 Photos</span>
							</div>
						</a>
					</div>
					<div class="col-md-3 animate-box">
						<a href="images/pic18.jpg" class="grid-photo img-popup" style="background-image: url(images/pic18.jpg);">
							<div class="desc">
								<h3>Flowers</h3>
								<span>19 Photos</span>
							</div>
						</a>
					</div>
					<div class="col-md-3 animate-box">
						<a href="images/pic19.jpg" class="grid-photo img-popup" style="background-image: url(images/pic19.jpg);">
							<div class="desc">
								<h3>Arhitecture</h3>
								<span>65 Photos</span>
							</div>
						</a>
					</div>
					<div class="col-md-3 animate-box">
						<a href="images/pic20.jpg" class="grid-photo img-popup" style="background-image: url(images/pic20.jpg);">
							<div class="desc">
								<h3>Hand</h3>
								<span>12 Photos</span>
							</div>
						</a>
					</div>
					<div class="col-md-3 animate-box">
						<a href="images/pic21.jpg" class="grid-photo img-popup" style="background-image: url(images/pic21.jpg);">
							<div class="desc">
								<h3>Flower</h3>
								<span>12 Photos</span>
							</div>
						</a>
					</div>
					<div class="col-md-4 animate-box">
						<a href="images/pic22.jpg" class="grid-photo img-popup" style="background-image: url(images/pic22.jpg);">
							<div class="desc">
								<h3>Food</h3>
								<span>85 Photos</span>
							</div>
						</a>
					</div>
					<div class="col-md-4 animate-box">
						<a href="images/pic23.jpg" class="grid-photo img-popup" style="background-image: url(images/pic23.jpg);">
							<div class="desc">
								<h3>Flower</h3>
								<span>88 Photos</span>
							</div>
						</a>
					</div>
					<div class="col-md-4 animate-box">
						<a href="images/pic24.jpg" class="grid-photo img-popup" style="background-image: url(images/pic24.jpg);">
							<div class="desc">
								<h3>Modeling</h3>
								<span>100 Photos</span>
							</div>
						</a>
					</div>
					
				</div>
			</div>
		</div>
		<footer>
		<div id="footer">
				<div class="container">
					<div class="row">
						<div class="col-md-3">
							<h3 class="section-title">初见初心</h3>
							<p>最初的目的是李嘉彬本人的毕业设计作品，想要做出一款展示照片，平面素材的网站，接着一步一步增减，修改，呈现出最后的版本，从初见瞬间改为初见，从最初的大而满到现在的简洁，</p>
						</div>
						
						<div class="col-md-3">
							<h3 class="section-title">站内服务</h3>
							<ul>
								<li><a href="#">照片</a></li>
								<li><a href="#">平面</a></li>
								<li><a href="#">单反设备</a></li>
								<li><a href="#">论坛</a></li>
								<li><a href="#">讯息</a></li>
								<li><a href="#">注册/登录</a></li>
							</ul>
						</div>

						<div class="col-md-4">
							<h3 class="section-title">照片分类</h3>
							<ul class="float">
								<li><a href="#">自然</a></li>
								<li><a href="#">社会</a></li>
								<li><a href="#">纪实</a></li>
								<li><a href="#">吃 &amp; 喝</a></li>
								<li><a href="#">动物</a></li>
								<li><a href="#">汽车</a></li>
							</ul>
							<ul class="float">
								<li><a href="#">风景</a></li>
								<li><a href="#">人物</a></li>
								<li><a href="#">物品</a></li>
								<li><a href="#">瞬间</a></li>
								<li><a href="#">平面</a></li>
								<li><a href="#">合成</a></li>
							</ul>
						</div>
						<div class="col-md-2">
							<h3 class="section-title">导航</h3>
							<ul>
								<li><a href="#">主页 </a></li>
								<li><a href="#">作品</a></li>
								<li><a href="#">平面</a></li>
								<li><a href="#">商城</a></li>
								<li><a href="#">论坛</a></li>
							</ul>
						</div>
					</div>
					<div class="row copy-right">
						<div class="col-md-6 col-md-offset-3 text-center">
							<p class="fh5co-social-icon">
								<a href="#"><i class="icon-twitter2"></i></a>
								<a href="#"><i class="icon-facebook2"></i></a>
								<a href="#"><i class="icon-instagram"></i></a>
								<a href="#"><i class="icon-dribbble2"></i></a>
								<a href="#"><i class="icon-youtube"></i></a>
							</p>
							<p>完成于2018.04.15 <a href="#">初见</a>. 遇见第一次. <br>BY 李嘉彬</p>
						</div>
					</div>
				</div>
			</div>
		</footer>
	
	</div>

	<!-- jQuery -->
	<script src="js/jquery.min.js"></script>
	<!-- jQuery Easing -->
	<script src="js/jquery.easing.1.3.js"></script>
	<!-- Bootstrap -->
	<script src="js/bootstrap.min.js"></script>
	<!-- Waypoints -->
	<script src="js/jquery.waypoints.min.js"></script>
	<!-- Counters -->
	<script src="js/jquery.countTo.js"></script>
	<!-- Magnific Popup -->
	<script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>

	<!-- Main JS (Do not remove) -->
	<script src="js/main.js"></script>

	</body>
</html>

